<template>
  <el-tabs
    v-model="editableTabsValue"
    type="card"
    class="demo-tabs"
    editable
    @tab-remove="handleTabsEdit"
    @tab-click="handleClick"
  >
    <template #add-icon>X</template>
    <el-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      :label="item.name"
      :name="item.name"
    >
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useTabs } from "@/store/tabs.js";

const store = useTabs();
const router = useRouter();
const route = useRoute();
const editableTabsValue = ref("1");
const editableTabs = store.tabsList;

onMounted(() => {
  const activeTab = editableTabs.find((item) => item.path === route.path);
  editableTabsValue.value = activeTab.name;
});

watch(
  () => route.path,
  (newPath) => {
    // 查找与当前路由对应的标签页
    const activeTab = editableTabs.find((item) => item.path === newPath);
    if (activeTab) {
      // 更新 editableTabsValue 以激活对应的标签页
      editableTabsValue.value = activeTab.name;
    }
  }
);

// 删除
const handleTabsEdit = (tabName) => {
  // 寻找该 name 下的 path
  const tabToRemove = editableTabs.find((item) => item.name === tabName);
  if (tabToRemove) {
    // 判断要删除的标签页的 path 是否为 /index
    if (tabToRemove.path === "/index") {
      return; // 如果是 /index 则不进行删除操作
    }

    // 找到要删除标签页的索引
    const indexToRemove = editableTabs.findIndex(
      (item) => item.name === tabName
    );
    let prevTab;

    // 若存在前一个标签页
    if (indexToRemove > 0) {
      prevTab = editableTabs[indexToRemove - 1];
    } else if (editableTabs.length > 1) {
      // 如果要删除的是第一个标签页且还有其他标签页，选择下一个标签页
      prevTab = editableTabs[indexToRemove + 1];
    }

    // 执行删除操作
    store.removeTab(tabToRemove.path);

    // 若存在前一个标签页，进行路由跳转
    if (prevTab) {
      router.push(prevTab.path);
    }
  }
};

const handleClick = (tabName) => {
  const tabToRemove = editableTabs.find(
    (item) => item.name === tabName.props.name
  );
  if (tabToRemove) {
    router.push(tabToRemove.path);
  }
};
</script>

<style scoped lang="less">
// 定义一些颜色变量
@primary-color: #409eff;
@bg-color: #f5f7fa;
@text-color: #303133;

.demo-tabs {
  background-color: var(--bg-color);
  border: 1px solid var(--bg-color);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

:deep(.el-tabs__nav) {
  border-bottom: 1px solid var(--bg-color);
}

:deep(.el-tabs__item) {
  display: flex;
  align-items: center;
  padding: 0 20px !important;
  margin: 0 !important;
  background-color: var(--bg-color);
  position: relative;
  padding-left: 30px !important;
  color: @text-color;
  font-size: 14px;
  transition: background-color 0.3s, color 0.3s;

  &:hover {
    background-color: rgba(64, 158, 255, 0.1);
    color: @primary-color;
  }

  &.is-active {
    background-color: var(--bg-color);
    color: @primary-color;
    border: 1px solid var(--bg-color);
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-bottom: -1px;
  }
}

:deep(.el-tabs__item)::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

:deep(.el-tabs__nav-wrap:after) {
  display: none;
}

:deep(.el-tabs__add-tab) {
  color: @primary-color;
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: darken(@primary-color, 10%);
  }
}

:deep(.el-tabs__header) {
  margin: 0 !important;
}
</style>
